<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        #container {
            margin: auto;
            width: 768px;
            height: 582px;
            border: 1px solid black;
            display: flex;
            flex-wrap: wrap;
            justify-content: space-around;
        }

        #top_container {
            width: 768px;
            height: 50px;
            /* border: 1px solid red; */
            margin: auto;
            text-align: center;
            font-size: 24px;
            color: black;
            line-height: 50px;
        }

        #img_container {
            width: 768px;
            height: 432px;
            border: 1px solid green;
            margin: auto;
            overflow: hidden;
        }

        #img_container img {
            width: 768px;
            height: 432px;
        }

        #btn1,
        #btn2 {
            width: 100px;
            height: 50px;
            cursor: pointer;
        }
    </style>
</head>

<body>
    <!-- 定时器轮播图 -->
    <div id="container">
        <div id="top_container"></div>
        <div id="img_container">
            <img src="../img/img_1.webp" alt="">
        </div>
        <button id="btn1">上一张</button>
        <button id="btn2">下一张</button>
    </div>
    <script>
        let btn_go = document.getElementById("btn2")
        console.log(btn_go);
        let btn_back = document.getElementById("btn1")
        console.log(btn_back);
        let info = document.getElementById("top_container")
        console.log(info)
        let img_num = document.getElementsByTagName("img")[0]
        console.log(img_num)
        let img_save = [
            "../img/img_1.webp",
            "../img/img_2.webp",
            "../img/img_3.webp",
            "../img/img_4.webp",
            "../img/img_5.webp"
        ]
        let index = 0
        info.innerText = "总共" + img_save.length + "张图片,当前是第" + (index + 1) + "张";
        btn_back.onclick = function () {
            clearInterval(change)
            index--
            if (index < 0) {
                index = img_save.length - 1
            }
            img_num.src = img_save[index]
            info.innerText = "总共" + img_save.length + "张图片,当前是第" + (index + 1) + "张";
        }
        btn_go.onclick = function () {
            clearInterval(change)
            index++
            if (index > img_save.length - 1) {
                index = 0
            }
            img_num.src = img_save[index]
            info.innerText = "总共" + img_save.length + "张图片,当前是第" + (index + 1) + "张";
        }
        let change = setInterval(changeimg, 2500)
        function changeimg() {
            if (index > img_save.length - 1 ) {
                index = 0
            }
            img_num.src = img_save[index]
            info.innerText = "总共" + img_save.length + "张图片,当前是第" + (index + 1) + "张";
            index++
        }

    </script>
</body>

</html>